<template>
  <div class="home">
    <div class="welcome-section">
      <h1>欢迎回来，{{ userName }}同学！</h1>
      <p class="subtitle">根据你的学习情况，建议今天复习《{{ todayRecommend }}》</p>
    </div>

    <!-- 快速访问卡片 -->
    <el-row :gutter="20" class="quick-access">
      <el-col :span="8">
        <el-card class="access-card" shadow="hover" @click="$router.push('/learner-profile')">
          <div class="card-content">
            <el-icon :size="32" color="#409EFF"><UserFilled /></el-icon>
            <div class="card-info">
              <h3>学习者画像</h3>
              <p>查看你的学习特征分析和个性化建议</p>
            </div>
          </div>
        </el-card>
      </el-col>
      <!-- 其他快速访问卡片 -->
    </el-row>

    <el-row :gutter="20">
      <!-- 左侧学习区域 -->
      <el-col :span="16">
        <!-- 课程概览卡片 -->
        <div class="section-container">
          <h2 class="section-title">
            <el-icon><Reading /></el-icon>
            课程学习
          </h2>
          <el-row :gutter="20" class="card-row">
            <el-col v-for="course in courses" :key="course.id" :span="12">
              <el-card class="course-card" shadow="hover" @click="navigateToCourse(course.id)">
                <div class="course-header">
                  <el-icon :size="24" :color="course.iconColor">
                    <component :is="course.icon" />
                  </el-icon>
                  <h3>{{ course.name }}</h3>
                </div>
                <el-progress :percentage="course.progress" />
                <div class="course-info">
                  <span>已学习 {{ course.completedChapters }}/{{ course.totalChapters }} 章</span>
                  <el-tag :type="course.tagType">{{ course.difficulty }}</el-tag>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </div>

        <!-- 推荐练习题 -->
        <div class="section-container">
          <h2 class="section-title">
            <el-icon><Edit /></el-icon>
            知识图谱推荐
          </h2>
          <!-- 知识点关联推荐 -->
          <div class="recommendation-section">
            <h3>相关知识点推荐</h3>
            <el-row :gutter="20">
              <el-col :span="8" v-for="point in recommendedPoints" :key="point.id">
                <el-card shadow="hover" class="point-card" @click="navigateToPoint(point.id)">
                  <div class="point-header">
                    <span class="point-title">{{ point.title }}</span>
                    <el-tag size="small" :type="point.courseType">
                      {{ point.courseName }}
                    </el-tag>
                  </div>
                  <div class="point-reason">
                    <el-icon><Connection /></el-icon>
                    <span>与 "{{ point.relatedTo }}" 相关</span>
                  </div>
                  <div class="point-meta">
                    <el-tag size="small" :type="point.difficultyType">
                      {{ point.difficulty }}
                    </el-tag>
                    <span>预计用时: {{ point.estimatedTime }}分钟</span>
                  </div>
                </el-card>
              </el-col>
            </el-row>
          </div>

          <!-- 练习题推荐 -->
          <div class="recommendation-section">
            <h3>基于知识关联的练习题</h3>
            <div class="exercise-list">
              <el-card v-for="exercise in recommendedExercises" 
                      :key="exercise.id"
                      class="exercise-card"
                      shadow="hover"
                      @click="startExercise(exercise.id)">
                <div class="exercise-info">
                  <div class="exercise-header">
                    <h4>{{ exercise.title }}</h4>
                    <el-tag size="small" :type="exercise.courseType">
                      {{ exercise.courseName }}
                    </el-tag>
                  </div>
                  <p>{{ exercise.description }}</p>
                  <div class="knowledge-relations">
                    <span class="relation-label">相关知识点：</span>
                    <el-tag 
                      v-for="point in exercise.relatedPoints"
                      :key="point.id"
                      size="small"
                      class="relation-tag"
                      @click.stop="navigateToPoint(point.id)"
                    >
                      {{ point.name }}
                    </el-tag>
                  </div>
                  <div class="exercise-meta">
                    <el-tag size="small" :type="exercise.difficultyType">
                      {{ exercise.difficulty }}
                    </el-tag>
                    <span>正确率: {{ exercise.correctRate }}%</span>
                    <span>做题人数: {{ exercise.attemptCount }}</span>
                  </div>
                </div>
                <el-button type="primary">开始做题</el-button>
              </el-card>
            </div>
          </div>
        </div>
      </el-col>

      <!-- 右侧学习状态 -->
      <el-col :span="8">
        <div class="section-container">
          <h2 class="section-title">
            <el-icon><DataLine /></el-icon>
            学习状态
          </h2>
          
          <!-- 总体进度 -->
          <el-card class="progress-card" shadow="hover">
            <el-progress
              type="circle"
              :percentage="totalProgress"
              status="success"
            />
            <div class="progress-info">
              <h3>总体进度</h3>
              <p>继续保持，你已超过{{ ranking }}%的同学</p>
            </div>
          </el-card>

          <!-- 最近错题分析 -->
          <el-card class="analysis-card" shadow="hover">
            <h3>知识点掌握分析</h3>
            <div class="weak-points">
              <h4>待加强知识点：</h4>
              <el-tag 
                v-for="point in weakPoints" 
                :key="point.id"
                :type="point.type"
                class="weak-point-tag"
                @click="navigateToPoint(point.id)"
              >
                {{ point.name }}
              </el-tag>
            </div>
          </el-card>

          <!-- 学习计划 -->
          <el-card class="plan-card" shadow="hover">
            <h3>今日学习计划</h3>
            <el-timeline>
              <el-timeline-item
                v-for="task in todayTasks"
                :key="task.id"
                :type="task.status"
                :timestamp="task.time"
              >
                {{ task.content }}
              </el-timeline-item>
            </el-timeline>
          </el-card>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import { Reading, Edit, DataLine } from '@element-plus/icons-vue'

const router = useRouter()
const userName = ref('康赟')
const todayRecommend = ref('计算机网络 - TCP/IP协议')
const totalProgress = ref(68)
const ranking = ref(85)

// 课程数据
const courses = ref([
  {
    id: 1,
    name: '数据结构与算法',
    icon: 'Connection',
    iconColor: '#409EFF',
    progress: 75,
    completedChapters: 6,
    totalChapters: 8,
    difficulty: '进行中',
    tagType: 'warning'
  },
  {
    id: 2,
    name: '计算机网络',
    icon: 'Monitor',
    iconColor: '#67C23A',
    progress: 45,
    completedChapters: 4,
    totalChapters: 9,
    difficulty: '进行中',
    tagType: 'warning'
  },
  {
    id: 3,
    name: '计算机组成原理',
    icon: 'Cpu',
    iconColor: '#E6A23C',
    progress: 30,
    completedChapters: 3,
    totalChapters: 10,
    difficulty: '进行中',
    tagType: 'warning'
  },
  {
    id: 4,
    name: '操作系统',
    icon: 'Monitor',
    iconColor: '#F56C6C',
    progress: 20,
    completedChapters: 2,
    totalChapters: 10,
    difficulty: '未开始',
    tagType: 'info'
  }
])

// 推荐的知识点
const recommendedPoints = ref([
  {
    id: 1,
    title: '红黑树的旋转操作',
    courseName: '数据结构与算法',
    courseType: 'primary',
    difficulty: '中等',
    difficultyType: 'warning',
    estimatedTime: 30,
    relatedTo: '平衡二叉树',
    reason: '基于你最近学习的AVL树知识点推荐'
  },
  // ... 其他推荐知识点
])

// 推荐的练习题
const recommendedExercises = ref([
  {
    id: 1,
    title: 'TCP三次握手状态转换',
    courseName: '计算机网络',
    courseType: 'success',
    difficulty: '中等',
    difficultyType: 'warning',
    description: '分析TCP连接建立过程中的状态变化...',
    correctRate: 75,
    attemptCount: 1280,
    relatedPoints: [
      { id: 1, name: 'TCP连接建立' },
      { id: 2, name: 'TCP状态机' }
    ]
  },
  // ... 其他推荐练习题
])

// 待加强知识点
const weakPoints = ref([
  { id: 1, name: '红黑树', type: 'danger' },
  { id: 2, name: 'TCP流量控制', type: 'warning' },
  { id: 3, name: '虚拟内存管理', type: 'warning' }
])

// 今日任务
const todayTasks = ref([
  { id: 1, content: '完成快速排序练习题', time: '09:00', status: 'success' },
  { id: 2, content: '学习TCP/IP协议章节', time: '14:00', status: 'primary' },
  { id: 3, content: '复习计算机组成原理', time: '16:00', status: 'info' }
])

// 导航方法
const navigateToCourse = (courseId) => {
  router.push(`/course/${courseId}`)
}

const startExercise = (exerciseId) => {
  router.push(`/exercise/${exerciseId}`)
}

const navigateToPoint = (pointId) => {
  router.push(`/point/${pointId}`)
}
</script>

<style scoped>
.home {
  max-width: 1200px;
  margin: 0 auto;
}

.welcome-section {
  text-align: center;
  margin-bottom: 40px;
}

.welcome-section h1 {
  color: var(--text-primary);
  margin-bottom: 8px;
}

.subtitle {
  color: var(--text-secondary);
  font-size: 16px;
}

.section-container {
  background: white;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
}

.section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  color: var(--text-primary);
}

.card-row {
  margin-bottom: 30px;
}

.course-card {
  margin-bottom: 20px;
  cursor: pointer;
  transition: transform 0.3s;
}

.course-card:hover {
  transform: translateY(-5px);
}

.course-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.course-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
}

.exercise-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.weak-points {
  margin-top: 16px;
}

.weak-point-tag {
  margin: 4px;
  cursor: pointer;
}

.analysis-card, .plan-card {
  margin-top: 20px;
}

.exercise-card {
  margin-bottom: 16px;
  cursor: pointer;
  transition: transform 0.2s;
}

.exercise-card:hover {
  transform: translateY(-3px);
}

.progress-card {
  text-align: center;
  padding: 20px;
  margin-bottom: 20px;
}

.progress-info {
  margin-top: 16px;
}

.countdown-card {
  text-align: center;
  padding: 20px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
}

.countdown {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 16px;
}

.countdown-item {
  text-align: center;
}

.countdown-item .number {
  font-size: 24px;
  font-weight: bold;
  color: var(--primary-color);
}

.countdown-item .unit {
  font-size: 14px;
  color: var(--text-secondary);
}

.recommendation-section {
  margin-bottom: 30px;
}

.recommendation-section h3 {
  margin-bottom: 16px;
  color: var(--text-primary);
}

.point-card {
  margin-bottom: 16px;
  cursor: pointer;
  transition: transform 0.2s;
}

.point-card:hover {
  transform: translateY(-3px);
}

.point-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.point-title {
  font-weight: bold;
  color: var(--text-primary);
}

.point-reason {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-secondary);
  margin-bottom: 12px;
}

.point-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.knowledge-relations {
  margin: 12px 0;
}

.relation-label {
  color: var(--text-secondary);
  margin-right: 8px;
}

.relation-tag {
  margin: 0 4px;
  cursor: pointer;
}

.relation-tag:hover {
  opacity: 0.8;
}

.quick-access {
  margin-bottom: 24px;
}

.access-card {
  cursor: pointer;
  transition: transform 0.2s;
}

.access-card:hover {
  transform: translateY(-3px);
}

.card-content {
  display: flex;
  align-items: center;
  gap: 16px;
}

.card-info h3 {
  margin: 0 0 8px 0;
  color: var(--text-primary);
}

.card-info p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 14px;
}
</style> 